<template>
    <l-page class="block pb-3 overflow-auto" :style="style">
        <l-navbar :title="detail.name" />
        <view class="m-3 mt-8">
            <view class="text-yellow-500 text-shadow text-2xl font-bold">
                {{ detail.name }}
            </view>
            <view class="text-white text-shadow text-xl">{{ detail.subject }}</view>
            <view class="bg-blue-300 rounded mt-2 p-3 text-white">
                一站式按揭贷款服务，令您的置业省时、省心、省力、省钱
            </view>
        </view>
        <view class="panel !pt-0 !px-0">
            <view class="title">
                <view class="content text-shadow">
                    专心 专注 专业
                </view>
            </view>
            <view class="title-label">
                <view class="content">产品简介</view>
            </view>
            <view class="p-3">
                <rich-text :nodes="detail.desc"></rich-text>
            </view>
            <view class="title-label">
                <view class="content">合作伙伴</view>
            </view>
            <view class="grid grid-cols-5 gap-1 py-3 px-2">
                <view class="flex flex-col items-center" v-for="item in detail.partner_banks" :key="item.value">
                    <u-image :src="$imgBase + item.value" width="60" height="60"></u-image>
                    <view>{{ item.name }}</view>
                </view>
            </view>
            <view class="title-label">
                <view class="content">贷款申请</view>
            </view>
            <view class="p-3">
                <l-select label="产品" v-model="formData.product_type" :list="product_types"
                    v-if="product_types.length"></l-select>
                <l-select class="mt-3" label="贷款用途" v-model="formData.purpose" :list="settings.dict_purpose"></l-select>
                <l-input class="mt-3" label="贷款金额" v-model="formData.loan_amount" suffix="万元"></l-input>
                <l-select label="贷款年限" class="mt-3" v-model="formData.loan_term" :list="loan.贷款年限"></l-select>
                <l-input class="mt-3" label="申&nbsp;请&nbsp;人" v-model="formData.realname"></l-input>
                <l-input class="mt-3" label="联系电话" v-model="formData.mobile"></l-input>
                <l-selects class="mt-3" label="所在地区" returnType="string" :list="areas"
                    v-model="formData.area"></l-selects>
            </view>
            <l-button class="mx-3" type="primary" ref="btn" @tap="apply">立即申请</l-button>
        </view>
    </l-page>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import Settings from "@/stores/settings"
import Loan from "@/stores/loan"
import { onLoad } from "@dcloudio/uni-app";
const settings = Settings();
const areas = ref<any[]>([]);
const getArea = async () => {
    areas.value = await settings.getRegions()
}
getArea()

const formData = reactive({
    loan_id: '',
    product_type: '',
    purpose: '',
    loan_amount: '',
    loan_term: '',
    realname: '',
    mobile: '',
    area: '',
    salesman_id: ''
}), detail = ref<any>({});

const product_types = ref([]), loan = Loan(), style = reactive({ background: '' });
let salesman_id: string;
onLoad((query: any) => {
    formData.loan_id = query.id
    formData.salesman_id = query.salesman_id
    salesman_id = salesman_id
    Loan().getProductdetail(query.id).then((res: any) => {
        res.product_type && (product_types.value = res.product_type?.map((item: any) => ({ label: item.name, value: item.value })));
        detail.value = res
        style.background = `${res.app_bg_color} url(${import.meta.env.VITE_APP_IMG_URL + res.bg_pic})  center/cover no-repeat`;
    })
})

const btn = ref()
const apply = () => {
    btn.value.showLoading()
    Loan().apply({ ...formData }).then((res: any) => {
        loan.toNextPage(res, 0, salesman_id)
    }).finally(() => { btn.value.hideLoading() })
}
</script>
<style scoped lang="scss">
:deep(.l-input-label) {
    min-width: 4em;
    text-align-last: justify;

}
</style>